<template>
	<el-card style="margin-top: 15px" class="space-between">
		<div>
			<h2 style="font-size: 33px; margin-top: 10px; opacity: 0.7">欢迎使用光狼游戏管理平台</h2>
		</div>
		<div class="platform-header">
			<div class="logo-container">
				<img src="/gameLogo.png" alt="光狼游戏管理平台" class="platform-logo" />
			</div>
			<div class="platform-title">
				<h1>光狼游戏管理平台</h1>
				<p class="subtitle">——专业、安全、高效的数字化游戏管理解决方案</p>
			</div>
		</div>
	</el-card>
	<br />
	<el-card>
		<el-row :gutter="20" justify="space-between">
			<el-col :span="15">
				<div style="display: flex; flex-direction: row">
					<el-avatar :size="60" :src="userStore.user.avatar" />
					<div style="display: flex; flex-direction: column; margin-left: 20px; line-height: 28px">
						<h1>您好，{{ userStore.user.realName }}</h1>
						<div>祝你开心每一天!</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</el-card>

	<br />
	<el-space fill wrap :fill-ratio="28" style="width: 100%">
		<el-card style="width: 600px">
			<template #header>
				<div class="card-header">
					<span>统计</span>
				</div>
			</template>
			<div style="height: 220px; display: flex; justify-content: center">
				<div ref="main" style="width: 100%; height: 220px"></div>
			</div>
		</el-card>
	</el-space>
	<br />
	<br />
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { useTransition } from '@vueuse/core'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const userStore = useUserStore()

const source = ref(0)
const outputValue = useTransition(source, {
	duration: 1500
})
source.value = 888888

const main = ref()

onMounted(() => {
	init()
})

const init = () => {
	let option
	const myChart = echarts.init(main.value)
	const series = [
		{
			data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'a'
		},
		{
			data: [10, 46, 64, '-', 0, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'b'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'a',
			name: 'c'
		},
		{
			data: [30, '-', 0, 20, 10, '-', 0, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'd'
		},
		{
			data: [10, 20, 150, 0, '-', 50, 10, 150, 80, 70, 110, 130],
			type: 'bar',
			stack: 'b',
			name: 'e'
		}
	]
	const stackInfo = {} as any
	for (let i = 0; i < series[0].data.length; ++i) {
		for (let j = 0; j < series.length; ++j) {
			const stackName = series[j].stack
			if (!stackName) {
				continue
			}
			if (!stackInfo[stackName]) {
				stackInfo[stackName] = {
					stackStart: [],
					stackEnd: []
				}
			}
			const info = stackInfo[stackName]
			const data = series[j].data[i]
			if (data && data !== '-') {
				if (info.stackStart[i] == null) {
					info.stackStart[i] = j
				}
				info.stackEnd[i] = j
			}
		}
	}
	for (let i = 0; i < series.length; ++i) {
		const data = series[i].data as any
		const info = stackInfo[series[i].stack]
		for (let j = 0; j < series[i].data.length; ++j) {
			const isEnd = info.stackEnd[j] === i
			const topBorder = isEnd ? 20 : 0
			const bottomBorder = 0
			data[j] = {
				value: data[j],
				itemStyle: {
					borderRadius: [topBorder, topBorder, bottomBorder, bottomBorder]
				}
			}
		}
	}
	option = {
		xAxis: {
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
		},
		yAxis: {
			type: 'value'
		},
		series: series
	}

	option && myChart.setOption(option)
	myChart.resize()
}
</script>

<style>
.welcome-card {
	margin: 20px 0;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	overflow: hidden;
	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	}
	h2 {
		font-size: 33px;
		background: linear-gradient(45deg, #409eff, #36d1dc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin: 25px 25px 15px;
		font-weight: 600;
		animation: slideIn 0.8s ease-out;
	}
}

.platform-header {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 20px 25px 30px;
	animation: fadeIn 0.8s ease-out 0.3s both;
}

.logo-container {
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border-radius: 50%;
	padding: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.5s ease;
	
	&:hover {
		transform: scale(1.05) rotate(5deg);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}
	
	.platform-logo {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.5s ease;
	}
}

.platform-title {
	h1 {
		font-size: 28px;
		color: #303133;
		margin: 0 0 12px 0;
		font-weight: 600;
	}
	
	.subtitle {
		font-size: 16px;
		color: #606266;
		margin: 0;
		line-height: 1.6;
		position: relative;
		padding-left: 15px;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4px;
			height: 16px;
			background: linear-gradient(to bottom, #409eff, #36d1dc);
			border-radius: 2px;
		}
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media screen and (max-width: 768px) {
	.platform-header {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	
	.logo-container {
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}
	
	.platform-title {
		h1 {
			font-size: 24px;
		}
		
		.subtitle {
			padding-left: 0;
			
			&::before {
				display: none;
			}
		}
	}
}
</style>
